<template>
  <div class="sort">
    <nav>
      <div class="left">
        <span class="active">分类</span>
      </div>
      <div class="right">
        <span>品牌</span>
      </div>
    </nav>
    <div class="content">
      <main>
        <div
          @click="onselect(index, item.cateid)"
          :class="['list', count == index ? 'active' : '']"
          v-for="(item, index) in sortList"
          :key="index"
        >
          <span>{{ item.name }}</span>
        </div>
      </main>
      <div class="goods">
        <div class="top">
          <van-nav-bar
            :left-text="title"
            right-text="商城"
            @click-left="onClickLeft"
            @click-right="onClickRight"
          />

          <van-grid square>
            <van-grid-item v-for="(item, index) in eatlist" :key="index">
              <van-image :src="item.photo" />
              <span>{{ item.name }}</span>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="bot">
          <h2>热门品牌</h2>
          <van-grid square>
            <van-grid-item v-for="(item, index) in brand" :key="index">
              <van-image :src="item.logo" />
              <span>{{ item.name }}</span>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>

    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <van-loading type="spinner" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getfenleiData, getListData } from "@/api/fenleibox";
export default {
  data() {
    return {
      count: 0,
      num: 5,
      sortList: [],
      eatlist: [],
      brand: [],
      title: "",
      show: true,
    };
  },

  methods: {
    onselect(idx, cateid) {
      this.count = idx;
      this.num = cateid;
      getfenleiData(this.num).then((res) => {
        this.title = res.data.cate_list[0].title;
        this.eatlist = res.data.cate_list[0].list;
        this.brand = res.data.cate_list[1].list;
      });
    },
    onClickLeft() {
      this.$router.push("/list");
    },
    onClickRight() {
      this.$router.push("/list");
    },
  },

  created() {
    getListData().then((res) => {
      this.sortList = res.data.categorys;
    });
    getfenleiData(this.num).then((res) => {
      this.title = res.data.cate_list[0].title;
      this.eatlist = res.data.cate_list[0].list;
      this.brand = res.data.cate_list[1].list;
      if (this.brand != "") {
        this.show = false;
      }
    });
  },
};
</script>
<style src="../assets/css/sort.css" scoped>
</style>
